Pull request overview

Adds an interactive “Scrubber” feature to ui-react-visualization charts, enabling hover/touch/keyboard-driven selection of an x-position and rendering corresponding chart overlays (line/label/beacons).

Changes:

• Introduce Scrubber component + provider/context for pointer/touch/keyboard interactions.
• Wire scrubbing support through CartesianChart and LineChart public APIs.
• Add unit tests and Storybook stories for scrubber behavior.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Regarding the gradient on the scrubber, I know we've brought this up in a daily before, but now I've had time to collect my ideas... I think the reason it looks odd is in this situation where the line intersects the lightest part:

It looks way better here, where the intersect point is near the graph's equator so the gradient is in its most opaque part:

I'd suggest confirming with Laurine if any of these solutions could work:

1. Remove gradient altogether, just use a solid line (we tried this before, mixed opinions).
2. Make it so the gradient always starts at the point of intersection, not in the equator of the graph (could be difficult dev-wise).
3. Remove both the gradient and the line (the change in transparency might be enough for the user to pinpoint the correct X coordinate).

Regardless, excellent work on this @zel-kass, as always. Nothing to point out code-wise, it's a bit cryptic and math heavy. Mostly tested interacting with it and feels great. 🫶

Beautiful work on this one 👏

Pull request overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated 5 comments.

export function XAxis({
  gridLineStyle = 'solid',
  position = 'bottom',
  showGrid = false,
  showLine = false,
  showTickMark = false,

export function YAxis({
  gridLineStyle = 'solid',
  position = 'start',
  showGrid = false,
  showLine = false,
  showTickMark = false,